<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link href="../css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="../css/iconfont.css">
	
</head>
<style type="text/css">
	.top{
		/* position: relative; */
		/* padding: 0px; */
		/* border-bottom: 1px solid lightgray; */
		/* background-color: white; */
		
	}
	.left{
		height:100px;
		width:100px;
		/*border:1px solid #F0AD4E;*/
		text-align: center;
		line-height: 100px;
		/*border-radius: 50%;*/
		margin:10px 0px 0px 10px;
	}
	
	.top>img{
		width:100%;
		height: 170px;
		/* display: none; */
		/* border-radius: 50%; */
		/* margin:10px 0px 0px 10px; */
	}
	.right{
		position: absolute;
		left:15px;
		top:110px;
	}
	
	.right p {
		color: white;
		font-weight: bold;
	}
	.right .item {
		color: white;
		font-weight: bold;
	}
	
	
	.iconfont{
		  font-family: "iconfont" !important;
		  font-size: 22px;
		  font-style: normal;
		  -webkit-font-smoothing: antialiased;
		  -moz-osx-font-smoothing: grayscale;
		  color: #0099CC;
		}
	.iconfont01{
		 font-size:40px;
		 color: lightgrey ;
	}	
	.left>span{
		position: absolute;
		top:1px;
		left: 31px;
	}
	.mui-switch.mui-active{
		border-color: #F0AD4E;
    	background-color: #F0AD4E;
	}
	.mui-pull-right{
		font-size:14px;
		color:lightgray;
	}
	
	.itemlist{
		line-height: 18px;
	}
	#ver {
		padding-right: 25px;
	}
	
	/* [v-cloak] {
		display: none;
	} */
	
</style>
<body>
	<div id="App" v-cloak>
		<div class="top">
			<img src="../img/admin.jpg" id = "head-img" >
			<div class="right">
				<p>用户：<span class="item">管理员</span></p>
				<p>角色：<span class="item">企业用户</span></p>
			</div>
		</div>	
		<ul class="mui-table-view mui-row" style="margin-top: 20px;">
			<li class="mui-table-view-cell mui-table-view">
				<a class="mui-navigate-right">
					<span class="iconfont icon-banbengengxin mui-pull-left " style="color: green;margin-right: 10px;"></span>
					<span>当前版本<span class="mui-badge mui-badge-danger" style="display: none;">new</span></span>
					<div class="mui-pull-right" id="ver">
					</div>
				</a>
			</li>
			<li class="mui-table-view-cell mui-table-view" @click="loginout">
				<a class="mui-navigate-right">
					<span class="iconfont icon-tuichu1 mui-pull-left " style="color: #0062CC;margin-right: 10px;"></span>
					<span>退出登录</span>
				</a>
			</li>
			<li class="mui-table-view-cell mui-table-view" @click="test">
				<a class="mui-navigate-right">
					<span class="iconfont icon-tuichu1 mui-pull-left " style="color: #0062CC;margin-right: 10px;"></span>
					<span>测试</span>
				</a>
			</li>
		</ul>
	</div>	
</body>

<script src="../js/mui.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/vue.min.js"></script>
<script type="text/javascript">
	
	var mv = new Vue({
		el:"#App",
		methods: {
			loginout:function(){
				plus.nativeUI.actionSheet({
				    cancel: "取消",
				    buttons: [{
				        title: "更换当前账号"
				    }]
				}, function(e) {
					
				    var index = e.index;
				    switch (index) { //case 0: 取消
				        case 1: 
							var loginUrl = localStorage.getItem(constValue.url);
							var userName = localStorage.getItem(constValue.userName);
							localStorage.clear();
							localStorage.setItem(constValue.url,loginUrl);
							localStorage.setItem(constValue.userName,userName);
							localStorage.setItem(constValue.autoLogin,"false");
							plus.runtime.restart();	
				            break;
				        case 2: 
				            break;
							
				    }
				});
			},
			test:function(){
				mui.openWindow({
					url:"base.html",
					id :"base.html"
				})
			}
		},
		mounted:function(){
			mui.init();
			mui.plusReady(function(){
				var accountDetail = JSON.parse(localStorage.getItem(constValue.accountDetail));
				var token = localStorage.getItem(constValue.token);
				if(accountDetail){
					mui(".item")[0].innerHTML = accountDetail.name ;
					mui(".item")[1].innerHTML =accountDetail.roleName;
				}
				mui("#ver")[0].innerHTML = __AppBaseInfo.AppVersion;
				defaultImg();
				mui("#head-img")[0].addEventListener('tap', function(e) {
					if(mui.os.plus){
						var a = [{
							title: "拍照"
						}, {
							title: "从手机相册选择"
						}];
						plus.nativeUI.actionSheet({
							title: "修改图片",
							cancel: "取消",
							buttons: a
						}, function(b) {
							switch (b.index) {
								case 0:
									break;
								case 1:
									getImage();
									break;
								case 2:
									galleryImg();
									break;
								default:
									break
							}
						})	
					}
					
				});
				
				function getImage() {
					var c = plus.camera.getCamera();
					c.captureImage(function(e) {
						plus.io.resolveLocalFileSystemURL(e, function(entry) {
							var s = entry.toLocalURL() + "?version=" + new Date().getTime();
							console.log(s);
							document.getElementById("head-img").src = s;
				
							//变更大图预览的src
							//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
							document.querySelector("#__mui-imageview__group .mui-slider-item img").src = s + "?version=" + new Date().getTime();;;
						}, function(e) {
							console.log("读取拍照文件错误：" + e.message);
						});
					}, function(s) {
						console.log("error" + s);
					}, {
						filename: "_doc/head.jpg"
					})
				}
				
				function galleryImg() {
					plus.gallery.pick(function(a) {
						plus.io.resolveLocalFileSystemURL(a, function(entry) {
							plus.io.resolveLocalFileSystemURL("_doc/", function(root) {
								root.getFile("head.jpg", {}, function(file) {
									//文件已存在
									file.remove(function() {
										console.log("file remove success");
										entry.copyTo(root, 'head.jpg', function(e) {
												var e = e.fullPath + "?version=" + new Date().getTime();
												document.getElementById("head-img").src = e;
												
												//变更大图预览的src
												//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
												document.querySelector("#__mui-imageview__group .mui-slider-item img").src = e + "?version=" + new Date().getTime();;
											},
											function(e) {
												console.log('copy image fail:' + e.message);
											});
									}, function() {
										console.log("delete image fail:" + e.message);
									});
								}, function() {
									//文件不存在
									entry.copyTo(root, 'head.jpg', function(e) {
											var path = e.fullPath + "?version=" + new Date().getTime();
											document.getElementById("head-img").src = path;
											
											//变更大图预览的src
											//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
											document.querySelector("#__mui-imageview__group .mui-slider-item img").src = path;
										},
										function(e) {
											console.log('copy image fail:' + e.message);
										});
								});
							}, function(e) {
								console.log("get _www folder fail");
							})
						}, function(e) {
							console.log("读取拍照文件错误：" + e.message);
						});
					}, function(a) {}, {
						filter: "image"
					})
				};
				
				
				function defaultImg() {
					if(mui.os.plus){
						plus.io.resolveLocalFileSystemURL("_doc/head.jpg", function(entry) {
							var s = entry.fullPath + "?version=" + new Date().getTime();;
							document.getElementById("head-img").src = s;
							
						}, function(e) {
							document.getElementById("head-img").src = '../img/admin.jpg';
							
						})
					}else{
						document.getElementById("head-img").src = '../img/admin.jpg';
						
					}
					
				}
				
			});
		}
	})
	

</script>
</html>